<template>
	<div class="addDynamic">
		<h1>新增动态</h1>
		<div class="addSelect clear_fix">
			<p>动态样式</p>
			<template class="select">
			  <el-radio v-model="radio" label="1">三列式</el-radio>
			  <el-radio v-model="radio" label="2">左1大右2小</el-radio>
			  <el-radio v-model="radio" label="3">左2小右1大</el-radio>
			</template>
		</div>
		
		<div class="addImgBox clear_fix">
			<p>第一张</p>
			<div class="uploadImg"><img src="../../assets/img/map.jpg"/></div>
			<el-row class="addBtn">
				<!--添加按钮-->
				<el-button class="addImg" v-if="changeBtn" type="primary" @click="dialogFormVisible = true">添加</el-button>
				<el-button class="addImg" v-if="!changeBtn" @click="dialogFormVisible = true">修改</el-button>
				
			</el-row>
		</div>
		<div class="addImgBox clear_fix">
			<p>第二张</p>
			<div class="uploadImg">未上传</div>
			<el-row class="addBtn">
				<!--添加按钮-->
				<el-button class="addImg" v-if="changeBtn" type="primary" @click="dialogFormVisible = true">添加</el-button>
				<el-button class="addImg" v-if="!changeBtn" @click="dialogFormVisible = true">修改</el-button>
				
			</el-row>
		</div><div class="addImgBox clear_fix">
			<p>第三张</p>
			<div class="uploadImg">未上传</div>
			<el-row class="addBtn">
				<!--添加按钮-->
				<el-button class="addImg" v-if="changeBtn" type="primary" @click="dialogFormVisible = true">添加</el-button>
				<el-button class="addImg" v-if="!changeBtn" @click="dialogFormVisible = true">修改</el-button>
				
			</el-row>
		</div>
		
		<div class="subBtn">
		 	<el-button  type="primary">立即提交</el-button>
		</div>
	 	<!--弹窗-->
		<el-dialog title="新增图片" :visible.sync="dialogFormVisible">
		  	<!--图片上传-->
		  	<div class="uploadBox">
		  	  <div class="upload">上传图片</div>
		      <el-upload
				  class="upload-demo"
				  ref="upload"
				  action="https://jsonplaceholder.typicode.com/posts/"
				  :on-preview="handlePreview"
				  :on-remove="handleRemove"
				  :file-list="fileList"
				  :auto-upload="false">
				  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
				</el-upload>
			</div>
	  </el-dialog>
	</div>
</template>

<script>
	import Editor from 'wangeditor'
	import config from '@/assets/js/config.js'
	import axios from "axios"
	export default{
		data(){
			return{
				radio: '1',
				//上传图片数据
				dialogFormVisible: false,
				changeBtn:true,
        		fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
			}
		},
		methods:{
			//上传按钮
		      submitUpload() {
		        this.$refs.upload.submit();
		        this.changeBtn=false
		      },
		      handleRemove(file, fileList) {
		        console.log(file, fileList);
		      },
		      handlePreview(file) {
		        console.log(file);
		      },
		      
		},
		mounted(){
		}
	}
</script>

<style lang="scss" scoped>
.addDynamic{
	margin: 20px auto 0px;
		/*width:%;*/
		height: 100%;
		padding: 0 30px;
		h1{
			font-size: 32px;
		}
}
.addSelect{
	margin-top: 30px;
	p{
		float: left;
		width: 10%;
		margin-right: 20px;
		line-height: 30px;
		text-align: right;
		font-weight: 700;
		color: #606266;
		
	}
	.select{
		float: left;
		width: 80%;
		height: 30px;
	}
	.el-radio{
		line-height: 30px;
	}
}
.addImgBox{
	width: 100%;
	margin-top: 30px;
	height: 40px;
	p{
		float: left;
		width: 10%;
		margin-right: 20px;
		text-align: right;
		line-height: 40px;
		font-weight: 700;
		color: #606266;
	}
	.uploadImg{
		float: left;
		max-width: 600px;
		line-height: 40px;
		img{
			width: 100%;
		}
		
	}
	.addBtn{
		float:right;
		/*margin-right: 20px;*/
	}
}
.subBtn{
	margin-top: 20px;
	margin-left: 100px;	
}
</style>